window.onload = function() {
    var url = '/supplier/index';
    var config = {
        elem: '#test',
        url: url,
        cols: [
            [{ field: 'id', width: "8%", title: '编号', align: 'center', sort: true },
                { field: 'goods_name', width: "20%", title: '商品名称' },
                { field: 'goods_type', width: "10%", title: '商品类别', align: 'center',templet: function (item) {
                        switch (parseInt(item.goods_type)){
                            case 2:
                                return '推荐';
                            case 3:
                                return '热门';
                            case 4:
                                return '新品';
                            case 5:
                                return '折扣';
                            default:
                                return '商城';
                        }
                    } },
                { field: 'org_pre', width: "10%", title: '价格', align: 'center', sort: true },
                { field: 'sales_volume', width: "8%", title: '总销量', align: 'center', sort: true },
                { field: 'status', width: "10%", title: '商品状态', align: 'center',templet: function (item) {
                    switch (parseInt(item.status)){
                        case 0:
                            return '下架';
                        case 1:
                            return '上架';
                    }
                } },
                { field: 'sku', width: "12.5%", title: 'SKU', align: 'center', toolbar: '#SKU' },
                { fixed: 'right', width: "20%", title: '操作', align: 'center', toolbar: '#barDemo' } //这里的toolbar值是模板元素的选择器
            ]
        ],
        page: true,
    };
    layui.use(['form', 'layer', 'jquery', 'table'], function() {
        var table = layui.table,
            form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer
        $ = layui.jquery;

        table.render(config);
        //监听工具条
        table.on('tool(barDemo)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; 
            var layEvent = obj.event; 
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent === 'edit') { //查看
                location.href = '/supplier/update?id=' + data.id;
            } else if (layEvent === 'sku') {
                $.get("/supplier/get-goodsattr", { id: data.id }, function(res) {
                    var data = res.data;
                    var colgroup = "";
                    var thead = "";
                    var tbody = "";
                    var titem = "";
                    var tableWidth = (4 * 100) + (data.tbody[0].val.length * 150);
                    if (data.thead.length > 0) {
                        for (var i = 0; i < data.thead.length; i++) {
                            colgroup += '<col width="150">';
                            thead += '<th>' + data.thead[i] + '</th>'
                        }
                    }
                    if (data.tbody.length > 0) {
                        for (var i = 0; i < data.tbody.length; i++) {
                            titem += '<td>' + data.tbody[i].original_price + '</td><td>' + data.tbody[i].discount_price + '</td><td>' + data.tbody[i].inventory + '</td>';
                            if(data.tbody[i].val.length>0){
                                var head='';
                                for (var j = 0; j < data.tbody[i].val.length; j++) {
                                    head += '<td>' + data.tbody[i].val[j] + '</td>';
                                    if (j == data.tbody[i].val.length - 1) {
                                        titem = head +titem;
                                        titem = '<tr>' + titem + '</tr>';
                                        tbody += titem;
                                        titem = "";
                                    }
                                }
                            }else{
                                titem = '<tr>' + titem + '</tr>';
                                tbody += titem;
                                titem = "";
                            }
                        }
                    }
                    colgroup += '<col width="100"><col width="100"><col width="100"><col width="100">';
                    thead += '<th>原价</th><th>折扣价</th><th>库存</th>';
                    Utils.layer.open({
                        title: '商品SKU',
                        content: '<table class="layui-table" style="width:' + tableWidth + 'px"><colgroup>' + colgroup + '</colgroup><thead><tr>' + thead + '</tr></thead><tbody>' + tbody + '</tbody></table>',
                        maxWidth: tableWidth + 40
                    })
                }, 'json');
            } else if (layEvent === 'del') {
                Utils.layer.open({
                    id: 1,
                    content: '确认要删除吗？',
                    btn: ['确认', '取消'],
                    btn1: function(index, layero) {
                        $.ajax({
                            type: "POST",
                            url: "/supplier/delete",
                            data: { id: data.id },
                            success: function(data) {
                                if (data.code == 200) {
                                    Utils.layer.msg(data.msg);
                                    setTimeout(function() {
                                        table.render(config);
                                    }, 1000)
                                    Utils.layer.close(1)
                                } else {
                                    Utils.layer.msg(data.msg);
                                }
                            }
                        })
                    },
                    btn2: function(index, layero) {}
                })
            }else if(layEvent === 'up'){
                $.ajax({
                    type: "POST",
                    url: "/supplier/modify-status",
                    data: { id: data.id,status:1 },
                    success: function(data) {
                        if (data.code == 200) {
                            Utils.layer.msg(data.msg);
                            setTimeout(function() {
                                table.render(config);
                            }, 1000)
                        } else {
                            Utils.layer.msg(data.msg);
                        }
                    }
                })
            }else if(layEvent === 'down'){
                $.ajax({
                    type: "POST",
                    url: "/supplier/modify-status",
                    data: { id: data.id,status:0 },
                    success: function(data) {
                        if (data.code == 200) {
                            Utils.layer.msg(data.msg);
                            setTimeout(function() {
                                table.render(config);
                            }, 1000)
                        } else {
                            Utils.layer.msg(data.msg);
                        }
                    }
                })
            }
        });
        //搜索
        form.on("submit(serch-form)", function(data) {
            var form = $('#serch-form').serialize();
            var goods_name = $("input[name='goods_name']").val();
            var one = $('.oneclass option:selected').val();
            var two = $('.twoclass option:selected').val();
            var three = $('.threeclass option:selected').val();
            var url = '/supplier/index/?goods_name=' + goods_name + '&tree_id=' + one + '&two_id=' + two + '&three_id=' + three;
            config.url = url;
            table.render(config);
            return false;
        });
        //三级联动
        // form.on('select(one)', function(data) {
        //     var classid = $(".oneclass option:selected").val();
        //     $('.twoclass').html('');
        //     $('.threeclass').html('<option value="0">请选择三级分类</option>');
        //     changeclassAjax('.twoclass', classid, '二')
        // });
        // form.on('select(two)', function(data) {
        //     var classid = $(".twoclass option:selected").val();
        //     $('.threeclass').html('');
        //     changeclassAjax('.threeclass', classid, '三')
        // });
        form.on('select(one)',function(data){
            var id=data.value;
            $('.twoclass').html('');
            $('.threeclass').html('<option value="0">请选择三级分类</option>');
            if(id!=0){
                $.ajax({
                    'url': '/goods/get-tree',
                    'type': 'POST',
                    'dataType': 'json',
                    'data': {id:id},
                    'success': function (data) {
                        if (data.code != 200) {
                            layer.alert(data.msg);
                            return false;
                        } else {
                            var option = '<option value="0">请选择二级分类</option>';
                            $.each(data.data,function(indexe,value){
                                option += '<option value="'+value.id+'">'+value.tree_name+'</option>'
                            });
                            $('.twoclass').append(option);
                            form.render('select')
                        }
                    }
                });
            }else{
                form.render('select')
            }
        })
        form.on('select(two)',function(data){
            var id=data.value;
            $('.threeclass').html('');
            if(id!=0){
                $.ajax({
                    'url': '/goods/get-tree',
                    'type': 'POST',
                    'dataType': 'json',
                    'data': {id:id},
                    'success': function (data) {
                        if (data.code != 200) {
                            layer.alert(data.msg);
                            return false;
                        } else {
                            var option = '<option value="0">请选择三级分类</option>';
                            $.each(data.data,function(indexe,value){
                                option += '<option value="'+value.id+'">'+value.tree_name+'</option>'
                            });
                            $('.threeclass').append(option);
                            form.render('select')
                        }
                    }
                });
            }else{
                form.render('select');
            }
            
        })

        //删除
        $(".black").on("click", function() {
            var id = $(this).attr("googsids");
            ShowTipBox();
            $(".a-confirm").on("click", function() {
                ajax("post", "/goods/delete", { id: id }, function success(data) {
                    if (data.code == 200) {
                        Utils.layer.msg(data.msg);
                        setTimeout(function() {
                            location.reload();
                        }, 1000)
                    } else {
                        Utils.layer.msg(data.msg);
                    }
                }, function error(data) {
                    Utils.layer.msg(data.msg)
                })
            });
            $(".a-cancel").on("click", function() {
                $(".a-div").hide();
            });
        });
        $('#addgoogs').click(function() {
            var hrefs = $(this).attr('herfs');
            window.location.href = hrefs;
        })

        function changeclassAjax(calsss, id, num) {
            $.ajax({
                'url': '/goods/get-tree',
                'type': 'POST',
                'dataType': 'json',
                'data': { id: id },
                'success': function(data) {
                    if (data.code != 200) {
                        Utils.layer.alert(data.msg);
                        return false;
                    } else {
                        var option = '<option value="0">请选择' + num + '级分类</option>';
                        $.each(data.data, function(indexe, value) {
                            option += '<option value="' + value.id + '">' + value.tree_name + '</option>'
                        });
                        $(calsss).append(option);
                        form.render('select')
                    }
                }
            });
        }
    });
}